/*
 * @Description: 
 * @Author: 马爽
 * @Date: 2021-03-08 23:04:50
 * @LastEditTime: 2021-03-10 11:27:30
 * @LastEditors: 马爽
 */
import { FC, useState } from 'react';
import { useDispatch } from 'umi';
import { Button, Input, Select, Form} from 'antd';
import { IdentityListType, UserListType } from '@/interface/user';

const { Option } = Select;

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

const tailLayout = {
  wrapperCol: { offset: 1, span: 16 },
};

interface Iprops {
    identityList: IdentityListType[],
    userList: UserListType[]
}


const Adduser:FC<Iprops> = ({identityList,userList}) => {
    const dispatch = useDispatch();

    const [flag,setFlag] = useState('add');
    
    const [form] = Form.useForm();

    const addUser = () => {
        setFlag('add')
    }

    const updataUser = () => {
        setFlag('updata')
    }

    const onReset = () => {
        form.resetFields();
    };

    function handleChange(value: any) {
    console.log(`selected ${value}`);
    }
    
    const onFinish = (values: any) => {
        console.log('Success:', values);
        let list = userList.filter(item => item.user_name === values.user_name)[0];
        // console.log(list);

        if(flag === 'add'){
            dispatch({
                type:'userManage/getAddUser',
                payload:{...values}
            })
        }else if(flag === 'updata'){
            dispatch({
              type:'userManage/updateUsers',
              payload:{...values,'user_id':list.user_id}
            })
        }

    };

    return (
        <div className='addbox'>
            <div className='btn'>
                <Button onClick={addUser}>添加用户</Button>
                <Button onClick={updataUser}>更新用户</Button>
            </div>
            <Form
                form={form}
                {...layout} 
                name="basic"
                onFinish={onFinish}
            >
                <Form.Item
                name="user_name"
                rules={[{ required: true, message: '用户名' }]}
                >
                    <Input placeholder='请输入用户名' />
                </Form.Item>

                <Form.Item
                name="user_pwd"
                rules={[{ required: true, message: '密码' }]}
                >
                    <Input placeholder='请输入密码' />
                </Form.Item>

                <Form.Item
                name="identity_id"
                rules={[{ required: true, message: '身份id' }]}
                >
                    <Select  style={{ width: 124 }} onChange={handleChange} placeholder={'请选择身份id'}>
                        {
                            identityList.map((item,index) => {
                                return (
                                <Option value={item.identity_id} key={index}>{item.identity_text}</Option>
                                )
                            })
                        }
                    </Select>
                </Form.Item>

                <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit">
                        确定
                    </Button>
                    <Button htmlType="button" onClick={onReset}>
                        重置
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}

export default Adduser;
